/* 
1 定义一个函数
2 发送请求获取数据 渲染页面
   token几乎都是携带在请求 头中
   点击修改数据
*/
const tbody = document.querySelector('tbody')
//获取数据渲染页面
async function getScore() {
    const result = await axios({
        url: "/score/list",
        // 请求头携带
        // headers:{
        //     // 一般就写这个名字，如果你的接口文档找不到说明，问后端确认
        //     Authorization: localStorage.getItem("token87"),
        // },
    })

    // 成绩管理 获取数据渲染页面
    // 生成空的html
    let html = ""
    for (const key in result.data.data) {
        // console.log(result.data.data[key]);
        const { name, score } = result.data.data[key]
        html += `
        <tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        <td class="score" data-stu_id="${key}" data-batch="${1}">${score[0]}</td>
        <td class="score" data-stu_id="${key}" data-batch="${2}">${score[1]}</td>
        <td class="score" data-stu_id="${key}" data-batch="${3}">${score[2]}</td>
        <td class="score" data-stu_id="${key}" data-batch="${4}">${score[3]}</td>
        <td class="score" data-stu_id="${key}" data-batch="${5}">${score[4]}</td>
      </tr>`
    }
    // 把html插入到tbody中
    tbody.innerHTML = html
}
getScore()

// 绑定双击事件
tbody.addEventListener("dblclick", function (ev) {
    // console.log("双击");
    // 判断是不是想要的元素
    const target = ev.target
    if (target.classList.contains("score")) {
        // 显示输入框
        const input = document.createElement("input")
        input.type = "text"
        input.value = target.innerText
        // 插入对应的位置
        target.appendChild(input)

        //设置input标签获得焦点
        input.focus()

        // 绑定失去焦点事件
        input.addEventListener("blur", updateScore)

        // 按下回车
        input.addEventListener("keyup", function (inputEv) {
            // 判断按下的是不是回车键
            if (inputEv.key === "Enter") {
                // 解绑
                input.removeEventListener("blur", updateScore)
                updateScore()
            }
        })

        async function updateScore() {
            // 获取参数 发送请求
            const { stu_id, batch } = target.dataset
            const score = input.value
            const result = await axios({
                url: "/score/entry",
                method: "post",
                data: { stu_id, batch, score }
            })
            // console.log(result);
            if (result.data.code === 0) {
                toastr.success(result.data.message, "叮咚")
                // 刷新数据
                getScore()
            }
        }
    }
})
